<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../hc.js"></script>
<title>fly$()</title>
<style type="text/css">
<!--
tr.tr00{
background:#f5faff;/*e0e9e9*/
padding:0;
border-top:none 0;
}
tr.tr00 td{
border-top:none 0;
text-align:center;
}
tr.tr01{
background:#fff;
padding:0;
border-top:none 0;
}
tr.tr01 td{
border-top:none 0;
text-align:center;
}
tr.tr1{
color:#fff;
background:#5089ab;
padding:0;
border-top:none 0;
border-bottom:solid 1px #fff;
}
tr.tr1 td{
text-align:center;
border-top:none 0;
border-bottom:solid 1px #fff;
}
tr.tr2{
text-align:center;
background:#c6d9ef;
}
-->
</style>
</head>

<body>
<div id="aa">aa
	<div id="bb">bb
		<hr />hr1
		<div id="cc">cc</div>
		<hr />hr2
		<h1 id="h1" style='background:#def'>h1</h1>
		<hr />hr3
	</div>
</div>
<button type="button" onclick="ea=$('h1').movable();">ea.movable(h1)</button>
<button type="button" onclick="ao=el$('div');ao.innerHTML='app-a';fly$($('aa'),ao)">aa</button>
<button type="button" onclick="fly$($('bb'),bb,-1)">bb</button>
<button type="button" onclick="fly$($('cc'),cc,1)">cc</button>
<button type="button" onclick="moveit(-1)">$('h1').appTo($('cc'),-1)</button>
<button type="button" onclick="moveit(1)">$('h1').appTo($('cc'),1)</button>
<button type="button" onclick="moveit(0)">$('h1').appTo($('cc'),0)</button>
<table width="500" border="1" cellpadding="1" cellspacing="1" id="tb">
	<tr>
		<td>r1</td>
		<td>r1</td>
		<td>r1</td>
		<td>t1</td>
	</tr>
	<tr>
		<td>r2<input type="text" name="inx0" id="inp01" value="1" /></td>
		<td>r2<input type="text" name="inx0" id="inp02" value="2" /></td>
		<td>r2<input type="text" name="inx0" id="inp03" value="3" /></td>
		<td>r2<input type="text" name="inx0" id="inp04" value="4" /></td>
	</tr>
	<tr>
		<td>r31<input type="text" name="inp1" id="inp1" value="inp1" /></td>
		<td>r32<input type="text" name="inp2" id="inp2" value="inp2" /></td>
		<td>r33<input type="text" name="inp3" id="inp3" value="inp3" /></td>
		<td>r34<input type="text" name="inp4" id="inp4" value="inp4" /></td>
	</tr>
</table>
<button type="button" onclick="bn();">$(&amp;inp0)</button>
<button type="button" onclick="bi();">$(inp1)</button>

<script type="text/javascript">
//bb=el$('b');
//bb.innerHTML='bb-1';
//cc=el$('i');
//cc.innerHTML='1-cc';
function bn(){
	var es=$("&inx0");su=0;
	for (var i=0,l=es.length; i<l; i++){
		alert(es[i].id);
		su+=parseInt(es[i].value,10);
	}
	alert(su);
}
function bi(){
	var es=$("inp1");
	alert(es.value);
}

function moveit(i){
$('h1').appTo($('cc'),i);
}
for(i=0;i<$('tb').rows.length;i++){
var tr=$('tb').rows[i];
$(tr).selectable();
$(tr).onclick=function(){this.sel$({toggle:function(ro){if(ro.className=='tr1')ro.className='tr0'+ ro.rowIndex%2;},fn:function(ro){ro.className=ro.className=='tr1'?('tr0'+ (ro.rowIndex+1)%2):'tr1';}});};
}
</script>
</body>
</html>
